<template>
  <div class="home">
    <div>
      {{ $store.state.num }}
    </div>
    <div>
      {{num }}
    </div>
    <div>{{total}}</div>
    <div>{{myCount}}</div>
    <button @click="add">111</button>
    <div>
      <button @click="handleClick1(1)">点击</button>
      <button @click='handleClick2(1)'>点击2</button>
    </div>
    <div>
      <button @click="updateNum(1)">点击</button>
      <button @click='updateTotal(1)'>点击2</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
//将计算属性用mapState函数包裹，它会自动调用这个函数，并且自动指向$store.state里面的变量
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      count: 10,

    }
  },
  name: "Home",
  computed: {
    myCount () {
      return this.count + 100
    },
    ...mapState(['num', 'total'])
  },

  //1、对象写法，传值直接在点击事件里就写明
  // methods: mapMutations({
  //   handleClick2: 'updateTotal',
  //   handleClick1: 'updateNum'
  // })
  //2、数组写法，点击事件名和mutation更改数据函数名相同时，可以使用数组方式
  // methods: mapMutations([
  //   'updateTotal',
  //   'updateNum'
  // ])
  //3、当有一些基本方法时，用扩展运算符...使用mapMutations
  methods: {
    add () {
      this.$store.commit("updateNum", 1);
    },
    ...mapMutations(['updateTotal', 'updateNum'])
  }
  ,
};
</script>
<style scoped>
</style>
